@mixin woh{
    width:100%;
    height: 100%;
}
html, body {
  @include woh;
  position: relative;
}
.overf{
    overflow: hidden;
}
#publish{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 200;
    display: none;
    ul{
        width: 5rem;
        height: 1.7rem;
        position: absolute;
        left: 0.4rem; 
        top: 4rem;
        border-radius: 0.05rem;
        background: #fff;
        z-index: 200;
        li{
            height: 0.84rem;
            line-height: 0.84rem;
            font-size: 0.34rem;
        }
        li:nth-of-type(1){
            height: 0.83rem;
            line-height: 0.83rem;
            border-bottom: 0.01rem solid #EEEEEE;
        }
        li:hover{
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
    }
}

.friendsCircle{
    margin-bottom:  0.96rem;
   .header{
      width: 100%;
      height: 0.86rem;
      line-height: 0.86rem;
      font-size:0.28rem;
      color:#FDFDFD;
      background-color: #3A393E;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 201;
      span{
          display: block;
          float: left;
      }
      span#retu,span#photo{
          width: 0.86rem;
          text-align: center;
      }
      span#retu{
          font-size: 0.4rem;
      }
      span#photo{
          font-size: 0.38rem;
      }
      span:nth-of-type(2){
          width: 4.48rem;
          padding-left: 0.2rem;
      }
    }

   .containerO{
        width: 100%;
        overflow: hidden;
        margin-top: 0.86rem;
        .conHead{
            height: 5.36rem;
            overflow: hidden;
            position: relative;
            img,span{
              display: block;
              position: absolute;
              color: #fff;
            }
            img#photoAlbum{
              width: 100%;
              height: 4.76rem;
              top: 0;
              left: 0;
              z-index: 1;            
            }
            span#name{
              text-align: center;
              width: 100%;
              height: 0.72rem;
              line-height: 0.72rem;
              font-size: 0.2rem;
              left:0;
              bottom: 0.5rem;
              z-index: 2;
            }
            img#headPor{
              width: 1.5rem;
              height: 1.5rem;
              border: 0.04rem solid #fff;
              bottom: 0;
              right: 0.24rem;
              z-index: 3;
            }
        }
        
        .conMain{
          padding: 0 0.2rem;
          margin-top: 0.3rem;
          overflow: hidden;
          section{
              overflow: hidden;
              margin-bottom: 0.3rem;
              border-bottom: 0.01rem solid #DBE1F2;
              .seHead{
                  width: 0.68rem;
                  height: 0.68rem;
                  float: left;
                  a,a img{
                      width: 100%;
                      height: 100%;
                      display: block;
                  }
              }
              .seText{
                  width: 5rem;
                  float: right;
                  overflow: hidden;
                  .userI{
                      height: 0.4rem;
                      line-height: 0.4rem;
                      font-size: 0.28rem;
                      color:#6D7888;
                      .usName{
                          float: left;
                      }
                  }
                  .fon{
                      font-size: 0.32rem;
                      color: #777777;
                      line-height: 0.44rem;
                      height: auto;
                  }
                  .pics{
                      width: 100%;
                      margin-top: 0.15rem;
                      overflow: hidden;
                      div{
                          display: block;
                          float: left;
                          margin: 0 0.02rem 0.02rem 0;
                          width: 32%;
                          img{
                          width: 100%;
                          height: auto;
                          display: block;
                          float: left;
                        }
                      }
                  }
                  .time{
                      font-size:0.14rem;
                      height: 0.3rem;
                      color: #666;
                      line-height: 0.3rem;
                      margin-top: 0.1rem;
                      overflow: hidden;
                      margin-bottom: 0.1rem;
                      span:nth-of-type(1){
                          float: left;
                      }
                      span:nth-of-type(2){
                          float: right;
                          margin-right: 0.2rem;
                          font-size:0.2rem;
                      }
                  }  
              }
          }
        }
   }
}

.friendList{
     margin-bottom:  0.96rem;
     background: #EBEBEB;
     .headerL{
        width: 100%;
        height: 0.86rem;        
        
        color:#FDFDFD;
        background-color: #3A393E;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        span{
            display: block;
            text-align: center;
            line-height: 0.86rem;
        }
        span:nth-of-type(1){
            width: 1.1rem;
            float: left;
            font-size:0.32rem;
        }
        span:nth-of-type(2){
            width: 1.22rem;
            float: right;
            font-size:0.36rem;
        }
        span:nth-of-type(3){
            width: 0.83rem;
            float: right;
            font-size:0.36rem;
        }
     }
     .mainList{
        width: 100%;
        overflow: hidden;
        margin-top: 0.86rem;
        margin-bottom: 0.96rem;
       
        .friend{
            border-top: 0.01rem solid #EBEBEB;
            border-bottom: 0.01rem solid #EBEBEB;
            width: 100%;
            background: #FFFFFF;
            overflow: hidden;
            position: relative;
            a{
                display: block;
                width: 0.65rem;
                height: 0.65rem;
                padding: 0.12rem 0.25rem;
                overflow: hidden;
                float: left;
                img{
                   width: 100%;
                   height: 100%;
                   display: block; 
                }
            }
            span:nth-of-type(1){
                height: 0.89rem;
                line-height: 0.89rem;
                text-align: left;
                font-size: 0.26rem;
                color: #131313;
                display: block;
                float: left;
            }
            span:nth-of-type(2){
                height: 0.89rem;
                line-height: 0.89rem;
                text-align: left;
                font-size: 0.26rem;
                color: white;
                background: red;
                padding: 0 0.2rem;
                display: block;
                display: none;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
     }
}
#tjFriend,#ssFriend{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #FFFFFF;
    .search{
        width: 100%;
        height: 0.52rem;
        background: #393A3E;
        padding: 0.12rem 0;
        color:#FCFCFD;
        position: fixed;
        top: 0;
        left: 0;       
        overflow: hidden;
        z-index: 1001;
        span.searchCancel{
            display: block;
            float: left;
            width: 0.85rem;
            line-height: 0.52rem;
            text-align: center;
            border-right: 0.01rem solid #2F3034; 
             font-size:0.36rem;           
        }
        .searchBox{
            width: 5.28rem;
            height: 0.49rem;
            margin-left: 0.14rem;           
            border-bottom: 0.03rem solid #589D43;        
            float: left;
            span.okBtn{
                display: block;
                float: left;
                width: 0.64rem;
                line-height: 0.49rem;
                text-align: center;
                 font-size:0.26rem;
            }
            .searchfriends{
                width: 3.7rem;
                height: 0.49rem;
                line-height: 0.49rem;
                display: block;
                float: left;
                border: none;
                background: none;
                text-align: left;
                outline: none;
                color: #DCDDDD;
                 font-size:0.26rem;
            }
        }                    
    }
    .searchCon{
            width: 100%;
            overflow: hidden;
            margin-top: 0.76rem;
            .friend{
                border-top: 0.01rem solid #EBEBEB;
                border-bottom: 0.01rem solid #EBEBEB;
                width: 100%;
                background: #FFFFFF;
                overflow: hidden;
                position: relative;
                a{
                    display: block;
                    width: 0.65rem;
                    height: 0.65rem;
                    padding: 0.12rem 0.25rem;
                    overflow: hidden;
                    float: left;
                    img{
                       width: 100%;
                       height: 100%;
                       display: block; 
                    }
                }
                span:nth-of-type(1){
                    height: 0.89rem;
                    line-height: 0.89rem;
                    text-align: left;
                    font-size: 0.26rem;
                    color: #131313;
                    display: block;
                    float: left;
                }
                span:nth-of-type(2){
                    height: 0.69rem;
                    line-height: 0.69rem;
                    margin-top:0.1rem;
                    text-align: left;
                    font-size: 0.26rem;
                    color: white;
                    background: #3C7A03;
                    padding: 0 0.2rem;
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
    }
}    

#fb{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #FFFFFF;
    display: none;
    .headerB{
        width: 100%;
        height: 0.86rem;                
        color:#FDFDFD;
        background-color: #3A393E;
        span{
            display: block;
            text-align: center;
            line-height: 0.86rem;
        }
        span:nth-of-type(1){
            width: 1.1rem;
            float: left;
            font-size:0.32rem;
        }
        span:nth-of-type(2){
            width: 1.22rem;
            height: 0.66rem;
            line-height: 0.66rem;
            float: right;
            font-size:0.26rem;
            color: #FFFDEF;
            margin-top: 0.1rem;
            background: #3C7A03;
            margin-right: 0.2rem;
        }
       
    }
    div#sendCon{
        padding: 0.2rem;
        overflow: hidden;
        background: #FFFFFF;
        #sendText{
            width: 6.0rem;
            line-height: 0.48rem;
            min-height: 4.0rem;
            font-size: 0.32rem;
            display: block;
            outline: none;
            border: 0;
        }
        #sendPic{
            width: 6.0rem;
            overflow: hidden;
            img{
                width: 1.2rem;
                height: 1.2rem;
                display: block;
                float: left;
            }
        }
    }
}

.footer{
    width: 100%;
    height: 0.96rem;
    border-top:0.01rem solid #D6D6D6;
    color:#8A8A8A;
    background: #FCFCFC;
    position: fixed;
    bottom: 0;
    left: 0;
    ul{
        overflow: hidden;
        li{
            width: 25%;
            height: 0.96rem;
            float: left;
        }
        span{
            display: block;
            width: 100%;
            text-align: center;
        }
        span:nth-of-type(1){
            height: 0.6rem;
            line-height: 0.6rem;
            font-size: 0.36rem;
        }
         span:nth-of-type(2){
            height: 0.36rem;
            font-size: 0.21rem;
        }
    }
}


